<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.68.3" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>dajngo&#43;vue折线图的绘制 &middot; 我的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0b ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/my_technology_blog/"><h1>我的博客</h1></a>
      <p class="lead">
       杨博的博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/my_technology_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2021. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>dajngo&#43;vue折线图的绘制</h1>
  <time datetime=2020-05-29T16:42:12&#43;0800 class="post-date">Fri, May 29, 2020</time>
  <h3 id="dajngovue折线图的绘制">dajngo+vue折线图的绘制</h3>
<p><strong>利用v-charts</strong></p>
<p><a href="https://v-charts.js.org/">进入v-charts官网</a></p>
<p><strong>1、npm安装</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#a6e22e">npm</span> <span style="color:#a6e22e">i</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#a6e22e">charts</span> <span style="color:#a6e22e">echarts</span> <span style="color:#f92672">-</span><span style="color:#a6e22e">S</span>
</code></pre></div><p><strong>2、main中引入v-charts</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">// v-chart表格
</span><span style="color:#75715e"></span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">VCharts</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;v-charts&#39;</span>
<span style="color:#a6e22e">Vue</span>.<span style="color:#a6e22e">use</span>(<span style="color:#a6e22e">VCharts</span>)
</code></pre></div><p><strong>3、前端vue</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">// data
</span><span style="color:#75715e"></span><span style="color:#a6e22e">chartData</span><span style="color:#f92672">:</span> {
	<span style="color:#75715e">// columns为横纵坐标
</span><span style="color:#75715e"></span>    <span style="color:#a6e22e">columns</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;time&#39;</span>, <span style="color:#e6db74">&#39;wen&#39;</span>],
    <span style="color:#a6e22e">rows</span><span style="color:#f92672">:</span> []
}
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">// methods
</span><span style="color:#75715e">// 接受传过来的数据，goodslist.blist后台传过来的数据，类型不许为list套dict,并且所有温度的key要相同，所有时间的key也要相同
</span><span style="color:#75715e">//后端数据库数据列表类型还原用eval()函数
</span><span style="color:#75715e"></span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">chartData</span>.<span style="color:#a6e22e">rows</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">resp</span>.<span style="color:#a6e22e">goodslist</span>.<span style="color:#a6e22e">blist</span>;
</code></pre></div><p><strong>数据类型展示</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python">[{<span style="color:#e6db74">&#39;wen&#39;</span>: <span style="color:#ae81ff">21</span>, <span style="color:#e6db74">&#39;time&#39;</span>: <span style="color:#e6db74">&#39;2020-05-29 09:46:57&#39;</span>}, {<span style="color:#e6db74">&#39;wen&#39;</span>: <span style="color:#f92672">-</span><span style="color:#ae81ff">28</span>, <span style="color:#e6db74">&#39;time&#39;</span>: <span style="color:#e6db74">&#39;2020-05-29 09:46:58&#39;</span>}, {<span style="color:#e6db74">&#39;wen&#39;</span>: <span style="color:#f92672">-</span><span style="color:#ae81ff">26</span>, <span style="color:#e6db74">&#39;time&#39;</span>: <span style="color:#e6db74">&#39;2020-05-29 09:46:59&#39;</span>}, {<span style="color:#e6db74">&#39;wen&#39;</span>: <span style="color:#ae81ff">13</span>, <span style="color:#e6db74">&#39;time&#39;</span>: <span style="color:#e6db74">&#39;2020-05-29 09:47:00&#39;</span>}, {<span style="color:#e6db74">&#39;wen&#39;</span>: <span style="color:#f92672">-</span><span style="color:#ae81ff">20</span>, <span style="color:#e6db74">&#39;time&#39;</span>: <span style="color:#e6db74">&#39;2020-05-29 09:47:01&#39;</span>}, {<span style="color:#e6db74">&#39;wen&#39;</span>: <span style="color:#ae81ff">22</span>, <span style="color:#e6db74">&#39;time&#39;</span>: <span style="color:#e6db74">&#39;2020-05-29 09:47:02&#39;</span>}, {<span style="color:#e6db74">&#39;wen&#39;</span>: <span style="color:#ae81ff">3</span>, <span style="color:#e6db74">&#39;time&#39;</span>: <span style="color:#e6db74">&#39;2020-05-29 09:47:03&#39;</span>}, {<span style="color:#e6db74">&#39;wen&#39;</span>: <span style="color:#ae81ff">13</span>, <span style="color:#e6db74">&#39;time&#39;</span>: <span style="color:#e6db74">&#39;2020-05-29 09:47:04&#39;</span>}, {<span style="color:#e6db74">&#39;wen&#39;</span>: <span style="color:#f92672">-</span><span style="color:#ae81ff">24</span>, <span style="color:#e6db74">&#39;time&#39;</span>: <span style="color:#e6db74">&#39;2020-05-29 09:47:05&#39;</span>}, {<span style="color:#e6db74">&#39;wen&#39;</span>: <span style="color:#f92672">-</span><span style="color:#ae81ff">23</span>, <span style="color:#e6db74">&#39;time&#39;</span>: <span style="color:#e6db74">&#39;2020-05-29 09:47:06&#39;</span>}]
</code></pre></div><p><strong>后端代码示例</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#75715e"># 运单详情信息展示</span>
<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Good</span>(APIView):
    <span style="color:#66d9ef">def</span> <span style="color:#a6e22e">get</span>(self,request):
        id <span style="color:#f92672">=</span> request<span style="color:#f92672">.</span>GET<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;id&#39;</span>)
        good <span style="color:#f92672">=</span> Goods<span style="color:#f92672">.</span>objects<span style="color:#f92672">.</span>filter(id<span style="color:#f92672">=</span>id)<span style="color:#f92672">.</span>first()
        wen_list <span style="color:#f92672">=</span> eval(good<span style="color:#f92672">.</span>wenlist)
        <span style="color:#66d9ef">print</span>(wen_list)
        <span style="color:#66d9ef">print</span>(type(wen_list))
        alist <span style="color:#f92672">=</span> []
        <span style="color:#66d9ef">for</span> i <span style="color:#f92672">in</span> wen_list:
            <span style="color:#66d9ef">for</span> k, v <span style="color:#f92672">in</span> dict(i)<span style="color:#f92672">.</span>items():
                adict <span style="color:#f92672">=</span> {}
                adict[<span style="color:#e6db74">&#39;wen&#39;</span>] <span style="color:#f92672">=</span> v
                adict[<span style="color:#e6db74">&#39;time&#39;</span>] <span style="color:#f92672">=</span> k
                alist<span style="color:#f92672">.</span>append(adict)
        <span style="color:#66d9ef">print</span>(alist)
        goods_ser <span style="color:#f92672">=</span> myser<span style="color:#f92672">.</span>GoodsSerialize(good)<span style="color:#f92672">.</span>data
        goods_ser[<span style="color:#e6db74">&#39;blist&#39;</span>] <span style="color:#f92672">=</span> alist
        res <span style="color:#f92672">=</span> {}
        res[<span style="color:#e6db74">&#39;code&#39;</span>] <span style="color:#f92672">=</span> <span style="color:#ae81ff">200</span>
        res[<span style="color:#e6db74">&#39;goodslist&#39;</span>] <span style="color:#f92672">=</span> goods_ser
        <span style="color:#66d9ef">return</span> Response(res)
</code></pre></div>
</div>


    </main>

    
  </body>
</html>
